<template>
  <div class="container">
    <div class="table-operations">
      <a-button v-for="(item, key) in buttons" :key="key">
        {{ item.text }}
      </a-button>
    </div>
    <a-table
      :row-selection="rowSelection"
      filter-multiple
      :columns="columns"
      :data-source="data"
    >
      <a slot="name" slot-scope="text">{{ text }}</a>
    </a-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      buttons: [
        { icon: '', text: '播放' },
        { icon: '', text: '添加到' },
        { icon: '', text: '下载' },
        { icon: '', text: '删除' },
        { icon: '', text: '退出批量操作' }
      ],
      columns: [
        {
          title: '已选首',
          dataIndex: 'name',
          key: 'name',
          slots: { title: 'customTitle' },
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '歌手',
          dataIndex: 'age',
          key: 'age',
          width: 80
        },
        {
          title: '专辑',
          dataIndex: 'address',
          key: 'address 1',
          ellipsis: true
        }
      ],
      data: [
        {
          key: '1',
          name: 'John Brown',
          age: 32,
          address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
          tags: ['nice', 'developer']
        },
        {
          key: '2',
          name: 'Jim Green',
          age: 42,
          address: 'London No. 2 Lake Park, London No. 2 Lake Park',
          tags: ['loser']
        },
        {
          key: '3',
          name: 'Joe Black',
          age: 32,
          address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
          tags: ['cool', 'teacher']
        }
      ]
    }
  },
  computed: {
    rowSelection() {
      return {
        getCheckboxProps: (record) => ({
          props: {
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name
          }
        })
      }
    }
  }
}
</script>

<style></style>
